<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/javascripts/build/bundle.css'/>
    <link rel='stylesheet' href='/css/bootstrap.css'/>
    <link rel="stylesheet" href="/css/font-awesome/css/font-awesome.min.css">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel='stylesheet' href='/stylesheets/toastr.css'/>
    <link rel='stylesheet' href='/stylesheets/alert.css' />
    <script src="/javascripts/lib/jquery-1.12.0.js"></script>
    <script src="/javascripts/lib/toastr.js"></script>
    <script>
        window.onload = function () {
            <%
            var JSONToJS = function (obj, indent) {
                var value = JSON.stringify(obj, null, indent);
                if (value) {
                    return value.replace(/<\/?script|[\u2028\u2029\ud800-\uDFFF\ufeff]/ig, function (a) {
                        var h = a.charCodeAt(0).toString(16);
                        return (h.length == 2 ? "\\x" : "\\u") + h + a.substr(1);
                    });
                }
            };

            %>
            function showAllProjects() {
                try {
                    $.ajax({
                        url: "http://127.0.0.1:8186/api/projects?user=" + <%- JSONToJS(shortid) %> +"&role=owner",
                        type: 'get',
                        success: function (info) {
                            info.data.forEach(function (item) {
                                addProjectsItem({
                                    id: item._id,
                                    title: item.title,
                                    name: item.name,
                                    createTime: item.create_at
                                });
                            });
                            if (info.data.length == 0) {
                                var projects = document.getElementById('projects');
                                projects.innerHTML += '<h3>没有关联的项目</h3>';
                            }
                        },
                        error: function (e) {
                            var projects = document.getElementById('projects');
                            projects.innerHTML += '<h3>获取项目列表错误</h3>';
                        }
                    });
                } catch (e) {
                    console.log(e);
                }
            }

            function addProjectsItem(item) {

                var html = "<div class='col-sm-4'> <div class='panel panel-default clickable'  id = " + 'project_' + item.id + "  data-project=" + item.id + ">"
                        + "<div class='panel-body'>"
                        + "<i class='fa fa-tasks ez-icon' aria-hidden='true'></i><span class='ez-label'>名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp称:&nbsp&nbsp</span>" + item.title
                        + "<i class='fa fa-trash' title='删除项目' aria-hidden='true' style='font-size: 17px;float: right;cursor: pointer' id = " + 'delete_' + item.id + " ></i>"
                        + "</div>"
                        + "<div class='panel-footer'>"
                        + "<p><i class='fa fa-th ez-icon' aria-hidden='true'></i><span class='ez-label'>项&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp目:&nbsp&nbsp</span>" + item.name + "</p>"
                        + "<p><i class='fa fa-clock-o ez-icon' aria-hidden='true'></i><span class='ez-label'>创建时间:&nbsp&nbsp</span>" + formatTime(item.createTime) + "</p>"
                        + "</div>"
                        + "</div>"
                        + "</div>";

                $('#projects').append(html);
                document.getElementById('delete_' + item.id).onclick = function (event) {
                    removeProject(item.id, event)
                };
                document.getElementById('project_' + item.id).onclick = function () {
                    openProject(item.id)
                };
            }

            function formatTime(str) {
                var d = new Date(str);
                return d.toLocaleString();
            }

            function removeProject(project_id, event) {
                event.stopPropagation();
                if(confirm('确定删除？')){
                    $.ajax({
                        url: "/api/project/" + project_id,
                        type: 'delete',
                        success: function (result) {
                            if (result.code == 200) {
                                toastr.info(null, '删除项目成功')
                                $('#projects').empty();
                                showAllProjects();
                            }else{
                                toastr.error(null, 'error', {timeOut: 0})
                            }
                        },
                        error: function (e) {
                            toastr.error(null, 'error', {timeOut: 0})
                        }
                    });
                }
            }

            $('body').click(function (evt) {
                if (!INFO_SHOW) {
                    return;
                }
                var pop = $('#userInfo')[0];
                var target = evt.target;
                var isInPop = false;
                while (target.parentNode && target.parentNode != target) {
                    if (target.parentNode == pop) {
                        isInPop = true;
                        break;
                    }
                    target = target.parentNode;
                }
                if (!isInPop) {
                    hideUserInfo();
                }
            });
            showAllProjects();
        }
        var INFO_SHOW = false;
        function openProject(project_id, event) {

            $.ajax({
                url: '/api/project/' + project_id,
                type: 'GET',
                success: function (result) {
                    window.location.href = '/';
                },
                error: function (e) {
                    toastr.error(null, 'error', {timeOut: 0})
                }
            });
        }
        function showUserInfo(evt) {
            $('#userInfo').show();
            $('#userInfo').offset({top: 42, left: $('body').width() - 220});
            INFO_SHOW = true;
            evt.cancelBubble = true;
        }

        function hideUserInfo() {
            $('#userInfo').hide();
            INFO_SHOW = false;
        }

        function back() {
            window.location.href = '/';
        }

    </script>
</head>
<body style="background:#F3F3F3;width:100%">


<div class="ez-nav" id="top" role="banner">
    <div class="left-logo"></div>
    <div class='toolbar'>
    </div>
    <button type="button" class="toolbutton" onclick="showUserInfo(event);">
        <i class="fa fa-user"></i>
    </button>

    <div class="right-logo"></div>
    <!-- <div class="container">
    </div> -->
</div>
<div class="ez-section">
    <div class="container">
        <div style="height:30px"></div>
        <div id="projects">

        </div>

    </div>
</div>

<div id='userInfo' role="tooltip" class="fade in popover bottom" style="display: none;">
    <div class="arrow" style="left: 70%;"></div>
    <h3 class="popover-title">
        <div>
            <img src="<%- avatar %>" style="margin-left:40px;margin-right:30px;" class="img-responsive img-circle">
            <div>
                <span>当前用户:  </span>
                <span><%- username %></span>
            </div>
        </div>
    </h3>
    <div class="popover-content">
        <div style="max-width:600px;margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px;">
            <div role="toolbar" class="btn-toolbar">
                <button style="min-width:100%;" type="button" class="btn btn-danger" onclick='back();'>返 回
                </button>
            </div>
        </div>
    </div>
</div>

</body>
<style>
    .ui-front {
        z-index: 10000;
    }
</style>

<style>
    body {
        background-color: #2D2D2D;
    }

    .ez-nav {
        background-color: #2D2D2D;
        border: none;
        display: flex;
        height: 39px;
    }

    .ez-section {
        position: absolute;
        background-color: #FBFBFB;
        background-position: bottom left;
        border: none;
        width: 100%;
        height: calc(100% - (39px));
        min-height: 200px;
        background-image: url('../res/image/bg.png');
        background-repeat: no-repeat;
        overflow-y: scroll;
    }

    .left-logo {
        height: 39px;
        width: 110px;
        background-image: url("../res/image/left-logo.png");
        background-repeat: no-repeat;
        background-position: center center;
    }

    .toolbar {
        flex-grow: 1;
        height: 39px;
        display: flex;
    }

    .toolbutton {
        position: relative;
        float: left;
        margin-left: -1px;
        border-radius: 0px;
        line-height: 36px;
        border: 1px solid transparent;
        background-color: transparent;
        color: white;
        min-width: 42px;
        padding: 0px;
        font-family: 微软雅黑;
        font-size: 20px;
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        white-space: nowrap;
        touch-action: manipulation;
        -webkit-user-select: none;
        text-transform: none;
        overflow: visible;
        outline: none;
    }

    .toolbutton:hover {
        color: #ffffff;
        background-color: #363636;
        border-color: #2b2b2b;
    }

    .btn-danger {
        color: #ffffff;
        background-color: #972500;
        border-color: #7e1f00;
    }

    .btn-danger:hover {
        color: #ffffff;
        background-color: #6e1b00;
        border-color: #401000;
    }

    .toolbutton:active {
    }

    .right-logo {
        height: 39px;
        width: 55px;
        background-image: url("../res/image/right-logo.png");
        background-repeat: no-repeat;
        background-position: center center;
    }

    .ez-icon {
        margin: 4px;
    }

    .ez-label {
        margin: 4px;
    }

    .workspace {
        width: 120px
    }

    .ez-input {
        height: 44px;
        width: 100%;
    }

    .clickable {
        cursor: pointer;
    }

    .ez-user-count {
        position: relative;
    }

    .ez-user-count::after {
        content: attr(data-tip);
        display: none;
        z-index: 999;
        position: absolute;
        padding: 5px 10px;
        border-radius: 4px;
        left: 50%;
        bottom: 100%;
        margin-bottom: 12px;
        transform: translateX(-50%);
        font-size: 16px;
        background: #444;
        color: #fff;
        cursor: default;
    }

    .ez-user-count::before {
        content: " ";
        position: absolute;
        display: none;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        margin-bottom: 3px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 9px solid #444;
    }

    .ez-user-count:hover::after,
    .ez-user-count:hover::before {
        display: block;
    }

</style>
</html>
